<!--根组件,用来装所有的组件,比如登录或者admin后台-->


<template>
  <!-- 通常编写组件的html结构，注意vue2.0中一定要有一个根元素 -->
  <div class="tmpl">
    <div class="section">
      <div class="location">
        <span>当前位置：</span>
        <a href="/index.html">首页</a> &gt;
        <a href="/cart.html">购物车</a>
      </div>
    </div>

    <div class="section">
      <div class="wrapper">
        <div class="bg-wrap">
          <!--购物车头部-->
          <div class="cart-head clearfix">
            <h2>
              <i class="iconfont icon-cart"></i>我的购物车</h2>
            <div class="cart-setp">
              <ul>
                <li class="first active">
                  <div class="progress">
                    <span>1</span>
                    放进购物车
                  </div>
                </li>
                <li class="active">
                  <div class="progress">
                    <span>2</span>
                    填写订单信息
                  </div>
                </li>
                <li class="last">
                  <div class="progress">
                    <span>3</span>
                    支付/确认订单
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!--购物车头部-->
          <div class="cart-box">
            <h2 class="slide-tit">
              <span>1、收货地址</span>
            </h2>
            <div id="orderForm">
              <el-form :model="form1" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
              <div class="form-box address-info">
               <!--  收货人姓名：-->
                <el-form-item label="收货人姓名：" prop="accept_name">
                    <el-input v-model="form1.accept_name"></el-input>
                </el-form-item>
                <!-- 所属地区占位 -->
                <el-form-item label="所属地区：" >
                  <v-distpicker :placeholders="placeArea" @selected="onSelected"></v-distpicker>
                </el-form-item>
                <!--详细地址：  -->
                <el-form-item label="详细地址：" prop="address">
                    <el-input v-model="form1.address"></el-input>
                </el-form-item>
                <!-- 手机号码： -->
                <el-form-item label="手机号码：" prop="mobile">
                    <el-input v-model="form1.mobile"></el-input>
                </el-form-item>
                <!--电子邮箱：  -->
                <el-form-item label="电子邮箱：" prop="email">
                    <el-input v-model="form1.email"></el-input>
                </el-form-item>
                <!--  邮政编码：-->
                <el-form-item label="邮政编码：" prop="post_code">
                    <el-input v-model="form1.post_code"></el-input>
                </el-form-item>
              </div>
              <h2 class="slide-tit">
                <span>2、支付方式</span>
              </h2>
              <!-- <ul class="item-box clearfix"> -->
              <div class="item-box clearfix">
                <el-radio class="radio" v-model="form1.payment_id" label="6">在线支付</el-radio>
              </div>
              <!-- </ul> -->

              <h2 class="slide-tit">
                <span>3、配送方式</span>
              </h2>
              <el-radio-group class="item-box clearfix" v-model="form1.express_id" @change='express'>
                  <el-radio :label="item.id" v-for="item in expresslist" :key='item.id'>{{item.title}}(费用:{{item.express_fee}})</el-radio>
              </el-radio-group>
              <h2 class="slide-tit">
                <span>4、商品清单</span>
              </h2>
              <div class="line15"></div>
              <table width="100%" border="0" align="center" cellpadding="8" cellspacing="0" class="cart-table">
                <tbody>
                  <tr>
                    <th colspan="2" align="left">商品信息</th>
                    <th width="84" align="left">单价</th>
                    <th width="84" align="center">购买数量</th>
                    <th width="104" align="left">金额(元)</th>
                  </tr>
                  <tr v-for='(item,index) in goodslist' :key='item.id'>
                    <td width="68">
                        <router-link  v-bind="{to:'/site/goodsinfo/'+item.id}">
                            <img :src="item.img_url" class="img">
                        </router-link>
                    </td>
                    <td>
                        <router-link  v-bind="{to:'/site/goodsinfo/'+item.id}">{{item.title}}</router-link>
                    </td>
                    <td>
                      <span class="red" >
                        ￥{{item.sell_price}}.00
                      </span>
                    </td>
                    <td align="center">{{goodsCount[index]}}</td>
                    <td>
                      <span class="red">
                        ￥{{item.sell_price*goodsCount[index]}}.00
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div class="line15"></div>
              <h2 class="slide-tit">
                <span>5、结算信息</span>
              </h2>
              <div class="buy-foot clearfix">
                <div class="left-box">
                  <dl>
                    <dt>订单备注(100字符以内)</dt>
                    <dd>
                      <textarea name="message" class="input" style="height:35px;" v-model="form1.message"></textarea>
                    </dd>
                  </dl>
                </div>
                <div class="right-box">
                  <p>
                    商品
                    <label class="price">{{goodsCount.length}}</label> 件&nbsp;&nbsp;&nbsp;&nbsp; 商品金额：￥
                    <label id="goodsAmount" class="price">{{goodoneAmount}}.00
                        
                    </label> 元&nbsp;&nbsp;&nbsp;&nbsp;
                  </p>
                  <p>
                    运费：￥
                    <label id="expressFee" class="price">{{form1.expressMoment}}.00</label> 元
                  </p>
                  <p class="txt-box">
                    应付总金额：￥
                    <label id="totalAmount" class="price">{{fullAmount}}.00</label>
                  </p>
                  <p class="btn-box">
                    <router-link to="/site/car" class="btn button">返回购物车</router-link>
                    <input id="btnSubmit"  type="button" value="确认提交" class="btn submit" @click='submitFrom("ruleForm")'>
                  </p>
                </div>
              </div>
            </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
    import VDistpicker from 'v-distpicker'; //V - Distpicker 是一个简单易用的地区选择器

    import { //导入localStronage的帮助类
        setItem,
        getItem
    } from '../kits/localStrone.js';

    // es6的export default{ 写法等同于 module.exports={
    export default {
        // es6的写法 data() 等同于es5的 data:function()
        components: {
            VDistpicker //把地区联动,当成这个下单页面的子组件,因为只有这个页面在用
        },
        data() {
            // 自定义手机号码验证规则
            var mobileNum = (rule, value, callback) => {
                var reg = /0?(13|14|15|17|18)[0-9]{9}/;
                if (!reg.test(value)) { //失败的时候
                    return callback(new Error('手机号码格式错误'));
                }
                callback();
            };
            // 自定义邮箱验证规则
            var emailNum = (rule, value, callback) => {
                var reg = /\w+((-w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+/;
                if (!reg.test(value)) { //失败的时候
                    return callback(new Error('邮箱格式错误'));
                }
                callback();
            };
            // 自定义邮政编码验证规则
            var codeNum = (rule, value, callback) => {
                var reg = /\d{6}/;
                if (!reg.test(value)) { //失败的时候
                    return callback(new Error('邮政编码格式错误'));
                }
                callback();
            };
            return {
                goodoneAmount: 0, //第一个总价格
                goodsCount: [], //存储商品的购买数量 ,长度和下面数组的长度一样
                goodslist: [], //存储API获取购物车回来的数据
                placeArea: { //  三级联动地区默认值
                    "province": "------- 省 --------",
                    "city": "--- 市 ---",
                    "area": "--- 区 ---"
                },
                expresslist: [], //存快递信息数组
                form1: { //表单需要提交的信息
                    "goodsAmount": 0, //商品总价格 最终的价格
                    "expressMoment": 20, //快递费用,默认选中顺丰,并且费用为20元
                    "accept_name": "", //收货人姓名
                    "area": { //  三级联动地区
                        "province": {
                            "code": "",
                            "value": ""
                        },
                        "city": {
                            "code": "",
                            "value": ""
                        },
                        "area": {
                            "code": "",
                            "value": ""
                        }
                    },
                    "address": "", //详细地址
                    "mobile": "", //手机号码
                    "email": "", //邮箱
                    "post_code": "", // 邮编
                    "payment_id": "6", //支付方式
                    "express_id": 1, //快递方式的ID ,默认让选中顺丰快递
                    "message": "", //备注信息
                    "goodsids": this.$route.params.ids, //购物车点击立即提交通过url传过来的id, //购买商品的id
                    "cargoodsobj": {} //购买商品对象，商品id为key，购买数量为值{商品id:购买数量}

                },
                rules: {
                    accept_name: [ //收货人姓名：
                        {
                            required: true,
                            message: '请输入收货人姓名',
                            trigger: 'blur'
                        },
                    ],
                    address: [ //详细地址：
                        {
                            required: true,
                            message: '请输入详细地址',
                            trigger: 'blur'
                        },
                    ],
                    mobile: [ //手机号码
                        {
                            validator: mobileNum,
                            trigger: 'blur'
                        }
                    ],
                    email: [ //电子邮箱：
                        {
                            validator: emailNum,
                            trigger: 'blur'
                        }
                    ],
                    post_code: [ //邮政编码：
                        {
                            validator: codeNum,
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        created() {
            this.getExpress();
            this.getshoplist();
            // setTimeout(() => {
            //     console.log(this.goodslist);
            // }, 1000);


            // 需求,购物车商品回来的时候,购买数量要从本地浏览器里面取,并且是在渲染之前,就可以拿出来
            // 然后根据getItem()返回回来的是一个对象{商品id:购买数量}; 拿当前url里面的id去遍历改对象,拿出购买数量,存在一个数组里面,然后渲染的时候的长度刚好该长度一样,解决.
            var localObj = getItem();
            var idArr = (this.form1.goodsids).split(','); //89,90,91

            for (var i = 0; i < idArr.length; i++) {
                for (var key in localObj) {
                    if (key == idArr[i]) {
                        this.goodsCount.push(localObj[key]); //存购买数量
                    }
                }
            }
            // console.log(this.goodsCount);

            // 计算第一个总价格
            // 思路: api的接口返回数据goodslist里面,有单价,刚才处理了购买数量存在this.goodsCount数组中  , 并且顺序都是一一对应的,所以遍历这两个其中一个数组都可以计算总价格
            //操作goodslist 这个api回来的数据,问题是这个数据回来需要时间
            setTimeout(() => {
                for (var i = 0; i < this.goodslist.length; i++) {
                    this.goodoneAmount += this.goodslist[i].sell_price * this.goodsCount[i] // 计算第一个总价格
                    this.form1.cargoodsobj[this.goodslist[i].id] = this.goodsCount[i]; ////购买商品对象，商品id为key，购买数量为值{商品id:购买数量} form要提交的数据,这个对象要处理
                }
                console.log(this.form1.cargoodsobj);
            }, 500);
            // console.log(this.form1.goodsAmount);
            // console.log(this.goodslist);


        },
        computed: { // 计算属性  this.form1.expressMoment 快递
            // 计算最终的价格
            fullAmount() {
                return this.form1.goodsAmount = this.form1.expressMoment + this.goodoneAmount; //快递价格+第一个总价
            }

        },
        methods: {
            getshoplist() { //通过拿到ids,获取要购买的商品列表
                var url = '/site/comment/getshopcargoods/' + this.form1.goodsids;
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        return this.$message.error(res.data.message);
                    }
                    // 成功 拿到数据,做渲染
                    this.goodslist = res.data.message;

                })
            },
            submitFrom(ruleForm) { // 确认提交表单的数据
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) { //验证成功
                        // alert('submit!');
                        console.log(this.form1);
                        var url = '/site/validate/order/setorder';
                        this.$http.post(url, this.form1).then(res => {
                            if (res.data.status == 1) {
                                return this.$message.error(res.data.message);
                            }
                            // 成功
                            // 成功之后服务器返回的是订单的ID,通过这个(res.data.message)ID,跳转到扫二维码的支付页面
                            var ouderID = res.data.message.orderid; //订单ID
                            // console.log(ouderID);
                            this.$message.success({
                                message: '下单成功',
                                duration: 1000,
                                onClose: () => {
                                    this.$router.push({
                                        name: 'pay',
                                        params: { //params里面必须是一个对象,并且键要和路由那边的参数名要一致,否则传不过去
                                            ouderID
                                        },
                                    })
                                }
                            });

                        })


                    } else { //验证失败
                        console.log('error submit!!');
                        return false;
                    }
                });


            },
            onSelected(data) { //三级联动选则到最后一个的时候触发
                this.form1.area.province.code = data.province.code; //省码
                this.form1.area.province.value = data.province.value; //省名
                this.form1.area.city.code = data.city.code; //市码
                this.form1.area.city.value = data.city.value; //市名
                this.form1.area.area.code = data.area.code; //区码
                this.form1.area.area.value = data.area.value; //区名
            },
            express(val) { //点击快递选项的时候,会触发这个事件,  val参数对应着:label="item.id"里面的值
                this.form1.express_id = val; //快递的ID

                // 点对应的快递的时候,除了要传id还要把快递价格传到服务器
                for (var i = 0; i < this.expresslist.length; i++) {
                    if (this.expresslist[i].id == val) {
                        this.form1.expressMoment = this.expresslist[i].express_fee; //快递的价格
                    }
                }
                // console.log(this.form1.express_id);
                // alert(val);
            },
            getExpress() {
                // 获取快递方式
                var url = '/site/validate/order/getexpresslist';
                this.$http.get(url).then(res => {
                    /*expresslist格式：
                        [
                            {
                            id: 1,
                            title: "顺丰快递",
                            express_fee: 20
                            },
                            {
                            id: 2,
                            title: "圆通快递",
                            express_fee: 10
                            },
                            {
                            id: 3,
                            title: "韵达快递",
                            express_fee: 8
                            }
                            ]
                            
                    */
                    this.expresslist = res.data.message;
                });
            }
        }
    }
</script>

<style>

</style>


<!--
<style></style>  中的样式是全局的
<style scoped></style> 中的样式是当前组件的

-->